const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const webpack = require('webpack');

const config = {
  // 入口 
  entry: path.resolve(__dirname, './src/login/login.js'),//入口文件路径
  // 出口
  output: {
    path: path.resolve(__dirname, 'dist'),//输出目录路径
    filename: './login/index.js',//输出文件路径
    clean: true//重新生成dist目录
  },
  // 开发服务器
  devServer:{
    static: './dist/login',//静态资源目录，相对于当前配置文件的位置
    port: 8081//指定端口号
  },
  // 插件:给webpack提供更多功能 
  plugins: [
    // 生成html文件
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './src/login/login.html'),//模板文件
      filename: path.resolve(__dirname, 'dist/login/index.html')//输出的文件
    }),
    // 生成css文件
    new MiniCssExtractPlugin({
      filename: "./login/index.css",//输出的文件
    }),
    // 定义环境变量
    new webpack.DefinePlugin({
      //定义环境变量，在代码中可以直接使用process.env.NODE_ENV获取到该变量的值
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
  ],
  // 加载器:让webpack识别更多模块文件的内容
  module: {
    rules: [
      // 打包css文件
      {
        test: /\.css$/i,
        use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader']
      },
      // 打包less文件
      {
        test: /\.less$/i,
        use: [
          //MiniCssExtractPlugin.loader,//此处替换掉原来的style-loader，让其生成单独的css文件
          process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
        ],
      },
      //使用内置属性打包图片资源
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',//内置属性，打包图片资源
        generator: {
          filename: 'images/[hash][ext][query]',
          publicPath: '../'//此处配置图片的路径，相对于css文件的路径(dist下,与login同级目录下)
          //生成两个png文件:dist/images/9ec024e6a149b3778d4f.png和b4d13a877e7b08485a89.png
        }
      }
    ],
  },
  // 优化 
  optimization: {
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
      `...`,//此处就是保留js文件的压缩配置，然后在此基础上再进行自定义css文件的压缩配置
      new CssMinimizerPlugin(),
    ],
  },
  // 解析 
  resolve:{
    // 别名
    alias: {
      '@': path.resolve(__dirname, 'src')//别名，在代码中可以直接使用@代替路径
    }
  }
}

// 正确的配置：开发环境启用 source map，生产环境禁用
if (process.env.NODE_ENV === 'development') {
  config.devtool = 'eval-cheap-module-source-map';
} else {
  config.devtool = false; // 或 'hidden-source-map' 如果需收集错误但不暴露
}


module.exports = config;